<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>产品交接单</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/elementui/index.css">
</head>
<body>
<div id="app">
    <template>
        <el-table
                :data="productHandovers"
                tooltip-effect="dark"
                style="width: 100%">
            <el-table-column
                    label="交接单号"
                    width="120">
                <template slot-scope="scope">{{ scope.row.id }}</template>
            </el-table-column>
            <el-table-column
                    label="订单编号"
                    width="120">
                <template slot-scope="scope">{{ scope.row.orderId }}</template>
            </el-table-column>
            <el-table-column
                    prop="pname"
                    label="产品名称"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="penterprise"
                    label="产品型号"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="productionName"
                    label="生产部门"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="wareName"
                    label="收货仓库"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="num"
                    label="入库数量"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="handoverDate"
                    label="交接日期"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="head"
                    label="交接人"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="remake"
                    label="备注"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="companyName"
                    label="交接单公司"
                    show-overflow-tooltip>
            </el-table-column>
        </el-table>
    </template>
    <!--分页-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="loadPage"
            :current-page="current"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</div>
<!-- 引入组件库 -->
<script src="/qs/qs.min.js"></script>
<script src="/vue/vue.js"></script>
<script src="/axios/axios.min.js"></script>
<script src="/elementui/index.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                total: 0,//总条数
                current: 0,//当前页数
                pageSize: 5, //每页条数
                productHandovers:null,
            }
        },
        methods: {
            handleSizeChange(val) {
                this.loadPage(this.current,val);
            },
            handleCurrentChange(val) {
                this.loadPage(val,this.pageSize)
            },
            //当前页跳转的方法
            loadPage(current,pageSize) {
                this.current = current;
                this.pageSize = pageSize;
                //查询商品
                axios.get("/companyProductHandovers?current=" + current+"&"+"pageSize="+pageSize).then(value => {
                        if (value.data.state == 1) {
                            this.productHandovers = value.data.data.records;
                            this.total = value.data.data.total;
                            this.pageSize = value.data.data.size;
                            this.current = value.data.data.current;
                        }
                    },
                )},
        },
        mounted(){
            this.loadPage(1,this.pageSize)
        }
    })
</script>

</body>
</html>